<template>
  <!-- 支付页面 -->
  <div class="body">
    <div class="tob">
      <div class="imgs" @click="fanh">
        <img src="../assets/syb.png" alt="" />
      </div>
      <div class="text">支付中心</div>
    </div>
    <div class="comtear">
      <div class="pages" v-if="shangping.actualPrice">
        <span
          ><span class="fuhao"> ￥</span
          ><span class="pagestext">{{ shangping.actualPrice }}</span></span
        >
        <span class="yhuo"
          >可用优惠劵{{ shangping.availableCouponLength }}张</span
        >
      </div>
    </div>
    <div class="yhan">
      <ul>
        <li>银行支付</li>
        <li v-for="(item, index) in zhif" :key="index">
          <div class="imgs"><img :src="item.imgs" alt="" /></div>
          <div class="text">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <input
              type="radio"
              name="组名"
              :value="item.title"
              @change="getRadioVal(item.title)"
            />
          </div>
        </li>
      </ul>
    </div>

    <div class="yidozhif">
      <ul>
        <li>移动在线支付</li>
        <li>
          <div class="imgs"><img :src="yido[0].imgs" alt="" /></div>
          <div class="text">
            <span>{{ yido[0].title }}</span>
          </div>

          <div>
            <div>
              <input
                type="radio"
                name="组名"
                :value="yido[0].title"
                @change="getRadioVal(yido[0].title)"
              />
            </div>
          </div>
        </li>

        <li>
          <div class="imgs"><img :src="yido[1].imgs" alt="" /></div>
          <div class="text">
            <span>{{ yido[1].title }}</span>
          </div>

          <div>
            <div>
              <input
                type="radio"
                name="组名"
                :value="yido[1].title"
                @change="getRadioVal(yido[1].title)"
                checked
              />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <van-submit-bar
      :price="shangping.actualPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Dialog } from "vant";
import API from "../http/API";
import { RadioGroup, Radio } from "vant";
import { SubmitBar } from "vant";
import { Toast } from "vant";
export default {
  name: "payment",
  components: {
    [RadioGroup.name]: RadioGroup,
    [Toast.name]: Toast,
    [Radio.name]: Radio,
    [SubmitBar.name]: SubmitBar,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      radio: "1",
      show: true,
      zhif: [
        {
          title: "农业银行储需卡",
          imgs: require("../assets/zf1.png"),
          radio: "0",
        },
        {
          title: "中国银行储需卡",
          imgs: require("../assets/zf3.png"),
          radio: "1",
        },
      ],
      yido: [
        {
          title: "微信支付",
          imgs: require("../assets/zf2.png"),
          radio: "0",
        },
        {
          title: "支付宝支付",
          imgs: require("../assets/zf4.png"),
          radio: "1",
        },
      ],
      shangping: [],
      // 支付信息
      paymentText: "支付宝支付",
      odid: [],
    };
  },
  created() {
    this.shangping = this.$route.params.shangping;
    console.log(this.shangping);
  },
  methods: {
    fanh() {
      this.$router.go(-1);
    },
    onSubmit() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "提交中...",
      });
      console.log(this.shangping.addressId);
      this.$post(API.POST_ORDER_SUBMIT, {
        //           请求方式：post
        // 参数：
        // ①封装 token
        // ②cartId：购物车 id（从购物车下单时为 0，立即下单时为 cart/fastadd
        // 接口返回的购物车 Id）
        // ③addressId：收货地址 id
        // ④couponId：传 0
        // ⑤userCouponId：传 0
        // ⑥message：备注
        // ⑦grouponRulesId：传 0
        // ⑧grouponLinkId：传 0
        token: localStorage.getItem("token"),
        cartId: 0,
        couponId: 0,
        userCouponId: 0,
        message: "备注",
        grouponRulesId: 0,
        grouponLinkId: 0,
        addressId: this.shangping.addressId,
      }).then((res) => {
        console.log(res);
        if (res.errmsg == "成功") {
          Toast.clear();
          this.odid = res;
          this.gmai(res);
        }
      });
    },

    // 点确定购买的时候
    gmai(e) {
      // console.log(e)
      Dialog.confirm({
        title: this.paymentText,
        message: "确定购买？",
      })
        .then(() => {
          // on confirm
          console.log(e);
          this.tofukuan(e);
        })
        .catch(() => {

                this.$router.push({
        path:"/orderform/obligation"
      });
        
        });
    },

    // htt
    tofukuan(e) {
      console.log(e.data.orderId);
      this.$post(API.POST_ORDER_PAY, {
        //           ‘order/pay’,//订单支付
        // 请求方式：post
        // 参数：
        // ①封装 token
        // ②orderId：订单 id
        token: localStorage.getItem("token"),
        orderId: e.data.orderId,
      })
        .then((res) => {
          console.log(res);
          if (res.errmsg == "成功") {
            //  关闭缓存

             this.$router.push({
        path:"/orderform/deliver",query:{index:2}
      });
        
          }
          console.log(res);
        })
        .catch((e) => {
          // on cancel
          console.log(e);
        });
    },
    getRadioVal(e) {
      console.log(e);
      this.paymentText = e;
    },
  },
};
</script>

<style lang="less" scoped>
// .yhaung {
//   // font-size: 20px;
// }

.yidozhif {
  margin-top: 10px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  ul {
    .sj();
    li {
      .sj();
      display: flex;
      align-items: center;
      .text {
        flex: 1;
        margin-left: 15px;
      }

      // border-bottom: 1px solid rgb(165, 165, 165);

      &:nth-child(1) {
        border-bottom: 1px solid rgb(170, 170, 170);
      }
      &:nth-child(2) {
        border-bottom: 1px solid rgb(170, 170, 170);
      }
      height: 50px;
      .imgs {
        width: 35px;
        height: 35px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      // border: 1px solid #000;
    }
  }
}

.yhan {
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  ul {
    .sj();
    li {
      //  span{
      //   margin-left: 15px;
      // }
      .sj();
      display: flex;
      align-items: center;
      .text {
        flex: 1;
        margin-left: 15px;
      }

      &:nth-child(1) {
        border-bottom: 1px solid rgb(170, 170, 170);
      }
      &:nth-child(2) {
        border-bottom: 1px solid rgb(170, 170, 170);
      }

      height: 50px;
      .imgs {
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      // border: 1px solid #000;
    }
  }
}
.body {
  height: 100%;
  background-color: @background;
  .comtear {
    padding-top: 50px;
    .pages {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100px;
      background-color: rgba(228, 242, 253, 0.822);
      .yhuo {
        margin-top: 10px;
      }
      span {
        color: rgb(221, 90, 90);
      }
      .fuhao {
        font-size: 15px;
      }
      .pagestext {
        font-size: 25px;
        color: rgb(221, 90, 90);
      }
    }
  }
}
.tob {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 50px;
  display: flex;
  align-items: center;
  // .sj();
  .text {
    margin-left: 5px;
    margin-top: 3px;
    font-size: 17px;
  }
}
.imgs {
  width: 20px;
  height: 20px;
  // border: 1px solid #000;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>